<template>
  <div class="cart-summary card sticky top-20">
    <h2 class="text-xl font-bold mb-4">订单摘要</h2>
    
    <div class="space-y-3 mb-6">
      <div class="flex justify-between">
        <span class="text-gray-600">商品数量：</span>
        <span class="font-medium">{{ totalQuantity }} 件</span>
      </div>
      
      <div class="flex justify-between">
        <span class="text-gray-600">商品总价：</span>
        <span class="font-medium">¥{{ total.toFixed(2) }}</span>
      </div>
      
      <div class="flex justify-between text-green-600">
        <span>优惠：</span>
        <span>-¥{{ discount.toFixed(2) }}</span>
      </div>
      
      <div class="border-t pt-3 flex justify-between items-baseline">
        <span class="text-lg font-medium">应付金额：</span>
        <span class="text-2xl font-bold text-primary-600">
          ¥{{ finalTotal.toFixed(2) }}
        </span>
      </div>
    </div>
    
    <button
      class="btn-primary w-full py-3 text-lg"
      :disabled="items.length === 0"
      @click="$emit('checkout')"
    >
      去结算
    </button>
    
    <!-- 优惠信息 -->
    <div class="mt-4 p-3 bg-yellow-50 rounded text-sm">
      <div class="flex items-start space-x-2">
        <div class="i-mdi-information text-yellow-600" />
        <div>
          <div class="font-medium text-yellow-900">会员优惠</div>
          <div class="text-yellow-700">
            开通VIP会员可享受全场8折优惠
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CartItem } from '~/stores/cart'

interface Props {
  items: CartItem[]
  total: number
}

const props = defineProps<Props>()
defineEmits(['checkout'])

const totalQuantity = computed(() => {
  return props.items.reduce((sum, item) => sum + item.quantity, 0)
})

// 优惠金额（可以根据会员等级计算）
const discount = computed(() => {
  return 0 // TODO: 根据会员等级计算优惠
})

const finalTotal = computed(() => {
  return Math.max(0, props.total - discount.value)
})
</script>